/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
/* const channels = document.querySelector('.form-select');
axios({
  url: '/v1_0/channels'
}).then(result => {
  console.log(result);
}) */
async function setChannelList() {
  const res =  await axios({url: '/v1_0/channels'});
  // console.log(res);
  const htmlStr =`<option value="" selected>请选择文章频道</option>` + res.data.channels.map(item => {
    return `<option value="${item.id}">${item.name}</option>`
  }).join('');
  document.querySelector('.form-select').innerHTML = htmlStr;
}

setChannelList();
/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */
document.querySelector('.img-file').addEventListener('change', async e => {
  // console.log(e.target.files[0]);
  const fd = new FormData();
  fd.append('image', e.target.files[0]);
  const result = await axios({
    url: '/v1_0/upload',
    method: 'post',
    data:fd
  })
  // console.log(result);
  document.querySelector('.rounded').src = result.data.url;
  document.querySelector('.rounded').classList.add('show');
  document.querySelector('.place').classList.add('hide');
})

// 点击img可以重新切换封面
// 思路：img点击 -> 用js方式触发文件选择元素click事件方法
document.querySelector('.rounded').addEventListener('click', ()=> {
  document.querySelector('.img-file').click();
})
/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
document.querySelector('.send').addEventListener('click', async (e) => {
  if(e.target.innerHTML !== '发布') return;
  const form = document.querySelector('.art-form');
  const data = serialize(form, {hash: true,empty: true});

  // 发布文章的时候，不需要id属性，所以可以删除（id为了后续编辑使用）
  delete data.id;
  // console.log(data);
  // 自己收集封面图片的地址并保存到data 对象中
  data.cover = {
    type: 1, //封面类型
    images: [document.querySelector('.rounded').src] //封面图片url
  }
  try{
    const res = await axios({url: '/v1_0/mp/articles', method: 'post', data});
    // console.log(res);
    myAlert(true, '发布成功');
    // 3.4 重置表单并跳转到列表页
    form.reset(); //只能清空表单元素
    // 清空图片和富文本编辑器
    document.querySelector('.rounded').classList.remove('show');
    document.querySelector('.place').classList.add('show');
    document.querySelector('.rounded').src = '';
    editor.setHtml('');
    setTimeout(() => {
      location.href = '../content/index.html';
    }, 1500) 
  }catch(error) {
    // console.dir(error);
    myAlert(false, error.response.data.message);
  }
});


/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */
(function() {
  //  4.2 发布文章页面接收参数判断（共用同一套表单）
  const paramsStr = location.search;
  const params = new URLSearchParams(paramsStr);
  // console.log(params);
  
  params.forEach(async (value,key) => {
    // 当前有要编辑的文章id被传过来
    // console.log(value,key);
    if(key === 'id') {
      //  4.3 修改标题和按钮文字
      document.querySelector('.title span').innerHTML = '修改文章';
      document.querySelector('.send').innerHTML  = '修改';
      // 4.4 获取文章详情数据并回显表单
     const res = await  axios({
        url: `/v1_0/mp/articles/${value}`,
        method: 'get'
      });
      console.log(res);
      // 解构，但是老师的方法更好
     /*  const {channel_id, content,title,cover} = res.data;
      console.log(channel_id);
      console.log(content);
      console.log(cover);
      console.log(title); */
      // 组织我仅仅需要的数据结构，为后续遍历回显到页面上做铺垫
      const dataObj = {
        channel_id: res.data.channel_id,
        title: res.data.title,
        rounded: res.data.cover.images[0],
        content: res.data.content,
        id: res.data.id
      }
      // 遍历数据对象属性，映射到页面元素上，快读赋值
      Object.keys(dataObj).forEach(key => {
        // 封面设置
        if(key=== 'rounded') {
          if(dataObj[key]) {
            // 有封面
            document.querySelector(`.${key}`).src = dataObj.rounded;
            document.querySelector('.rounded').classList.add('show');
            document.querySelector('.place').classList.add('hide');
          }
        }else if(key === 'content') {
            editor.setHtml(dataObj[key]);
        }else {
          // 用数据对象属性名，作为标签name属性选择器值来找到匹配的标签
          document.querySelector(`[name = ${key}]`).value = dataObj[key];
        }
      })
    }
  })
})();
/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */
document.querySelector('.send').addEventListener('click', async (e) => {
  if(e.target.innerHTML !== '修改') return;
  const form = document.querySelector('.art-form');
  const data = serialize(form, {hash: true,empty: true});
  // console.log(data);
  // 自己收集封面图片的地址并保存到data 对象中
  data.cover = {
    type: document.querySelector('.rounded').src ? 1 : 0, //封面类型
    images: [document.querySelector('.rounded').src] //封面图片url
  }
  try{
    const res = await axios({url: `/v1_0/mp/articles/${data.id}`, method: 'put', data});
    // console.log(res);
    myAlert(true, '修改文章成功');
  /*   // 3.4 重置表单并跳转到列表页
    form.reset(); //只能清空表单元素
    // 清空图片和富文本编辑器
    document.querySelector('.rounded').classList.remove('show');
    document.querySelector('.place').classList.add('show');
    document.querySelector('.rounded').src = '';
    editor.setHtml('');
    setTimeout(() => {
      location.href = '../content/index.html';
    }, 1500)  */
  }catch(error) {
    // console.dir(error);
    myAlert(false, error.response.data.message);
  }
})